<template>
	<div class="container">
		<div style="text-align: left">
			<el-button type="primary" @click="toogleYBM" v-if="!isKq"
				>开启预报名</el-button
			>
			<el-button type="danger" @click="toogleYBM" v-else>关闭预报名</el-button>
		</div>
		<el-tabs v-model="activeTab" class="demo-tabs">
			<el-tab-pane label="预报名的名单" name="first">
				<pre-sign-up-student></pre-sign-up-student>
			</el-tab-pane>
			<el-tab-pane label="未正式报名人员" name="second">
				<sign-up-student></sign-up-student>
			</el-tab-pane>
			<el-tab-pane label="人员成绩" name="third">
				<student-score></student-score>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import PreSignUpStudent from "@/components/PreSignUpStudent.vue";
import SignUpStudent from "@/components/SignUpStudent.vue";
import StudentScore from "@/components/StudentScore.vue";
import { ElMessage } from "element-plus";

export default {
	name: "ManagementPage",
	components: {
		StudentScore,
		SignUpStudent,
		PreSignUpStudent,
	},
	data() {
		return {
			activeTab: "first",
			isKq: false,
		};
	},
	methods: {
		toogleYBM() {
			fetch(`${this.$store.getters.point}/Admin/preSignUp/openOrCloseSignUp`, {
				method: "POST",
			})
				.then((response) => response.text())
				.then((result) => {
					let data = JSON.parse(result).code;
					if (data) {
						this.isKq = !this.isKq;
						ElMessage({
							message: this.isKq ? "开启成功" : "关闭成功",
							type: "success",
						});
					} else {
						ElMessage({
							message: this.isKq ? "关闭失败" : "打开失败",
							type: "error",
						});
					}
				});
		},
	},
	mounted() {
		fetch(`${this.$store.getters.point}/Admin/preSignUp/loadButton`, {
			method: "POST",
		})
			.then((response) => response.text())
			.then((result) => {
				this.isKq = parseInt(JSON.parse(result).data?.isOpen) === 1;
			});
	},
};
</script>

<style scoped>
.container {
	width: 75%;
	margin: 30px auto auto;
}
</style>
